// ES9中对正则进行了扩展, 至于扩展了什么东西, 我们等会说, 先让你完成一个小需求, 使用正则将下面这个字符串中的href属性以及文本内容解析出来
// <a href="http://www.baidu.com">百度一下</a>

// ES5方式
function parseLink1(str) {
  // 1.定义正则解析规则
  const reg = /<a href="(.*)">(.*)<\/a>/
  // 2.执行正则
  const res = reg.exec(str);
  // 3.返回正则结果
  return res;
}

// ES9新增命名捕获分组方式
function parseLink2(str) {
  // 1.定义正则解析规则 这边与ES5有点不一样了 注意看 我在.*前面添加了一个 ?<属性名> 其实就相当于给这一个匹配到的内容取了一个变量名称
  const reg = /<a href="(?<url>.*)">(?<content>.*)<\/a>/;
  // 2.执行正则
  const res = reg.exec(str);
  // 3.返回正则结果
  return res;
}

const str = `<a href="http://www.baidu.com">百度一下</a>`;
const res1 = parseLink1(str);
// 使用ES5方式获取的数据为一个数组 第一个元素返回解析前的完整字符串 第二个元素是第一次匹配到的(.*) 第三个元素是第二次匹配的到的(.*) 如果还有元素以此类推
console.log(res1[0]);
console.log(res1[1]);
console.log(res1[2]);

console.log("\n\nES9方式:");
const res2 = parseLink2(str);
console.log(res2); // 打印结果时我们可以看见在 res2.groups 属性上多了两个属性正是我在(.*)处定义的 url 与 content
// 既然这样就好办了 我们直接通过属性获取
console.log(res2.groups.url);
console.log(res2.groups.content);
// 可以发现结果与ES5处理无异 但是这样的好处是什么呢?

// 总结: 原来ES5获取需要通过下标, 如果解析内容出现变动, 那么匹配下标也需要改变, 这样就是一改全改, 导致代码的维护与扩展性不友好
// 通过属性的方式, 更优雅, 而且即使需求变动也只是增加属性而已, 扩展起来更加便捷